<template>
  <view>
    <u-navbar :left-icon="null" :safe-area-inset-top="true" placeholder bg-color="var(--kui-color-theme)"
      title-style="color:white">
    </u-navbar>
    <view class="user-top-view box-border rounded-br-2xl rounded-bl-2xl">
      <view class="user-view-header box-border">
        <view>
          <u-image :src="userBaseInfo.avatar" width="80" height="80" radius="50%"></u-image>
        </view>
        <view class="userinfo">
          <view class="uname">
            <view class="flex-col">
              <text class="_item">{{ userBaseInfo.name || "" }} &nbsp;</text>
              <text class="color-sub-txt" style="font-size: 24rpx; padding-top: 4px">{{ userBaseInfo.phone }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="user-view-item account-balance">
        <u-grid :border="false" :col="3">
          <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex" @click="onUserGridClick(listItem)">
            <view class="g-item">
              <text class="g-value">{{ listItem.name }}</text>
              <text class="grid-text">{{ listItem.title }}</text>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <view class="user-view-item account-balance m-2 rounded-md">
      <view class="px-4"> </view>
      <u-grid :border="false" :col="4">
        <u-grid-item v-for="(listItem, listIndex) in userFuncList" :key="listIndex" @click="onOrderTypeClick(listItem)">
          <view class="g-item">
            <view v-if="listItem.iconType == 'font'" class="meunfont-bg-style" :style="{
              backgroundColor: listItem.color || 'var(--kui-color-theme)',
            }">
              <text class="meunfont" :class="[listItem.icon]" :style="{
                fontSize: listItem.iconSize || 50 + 'rpx',
                color: 'white',
              }"></text>
            </view>
            <view v-else>
              <image :src="listItem.icon" :style="{
                width: listItem.iconSize || 70 + 'rpx',
                height: listItem.iconSize || 70 + 'rpx',
              }"></image>
            </view>
            <text class="grid-text">{{ listItem.title }}</text>
          </view>
        </u-grid-item>
      </u-grid>
    </view>

    <view class="user-view-item">
      <u-cell-group :border="false">
        <u-cell :border="false" v-for="(item, index) in accountInfoList" :icon="item.icon" :title="item.title"
          @click="onCellItemClick(item)" :customStyle="{ padding: '8rpx' }" :key="item.title">
          <template #icon>
            <view v-if="item.iconType == 'font'">
              <text class="meunfont" :class="[item.icon]" :style="{
                fontSize: item.iconSize || 40 + 'rpx',
                color: item.color || 'var(--kui-color-theme)',
              }"></text>
            </view>
            <view v-else>
              <image :src="item.icon"></image>
            </view>
          </template>
          <template #title>
            <text style="margin-left: 25rpx">{{ item.title }}</text>
          </template>
          <template #value>
            <text style="color: grey">{{ item.desc }}</text>
          </template>
          <template #right-icon>
            <view style="position: relative; height: max-content" v-if="item.islink != false">
              <u-text :text="item.linkText" suffix-icon="arrow-right" icon-style="color: var(--kui-color-theme);"
                size="24rpx"></u-text>
              <button class="hide-after" style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  margin: 0;
                  padding: 0;
                  color: transparent;
                  background: transparent;
                  height: 100%;
                " :open-type="item.openType">
                {{ item.openType }}
              </button>
            </view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useStore } from "vuex";
import config from "@/common/config";
const store = useStore();

const debugCount = ref(0);
// accountInfoList 使用 reactive，因为包含多个对象，每个对象有各自的状态
const accountInfoList = reactive([
  {
    show: true,
    icon: "meun-yaoqing",
    // icon: "/static/images/home/icon/icon34.png",
    iconType: "font",
    title: "个人信息",
    desc: "",
    path: "/pages/subMain/userInfo/index",
    islink: true,
  },
  {
    show: true,
    iconType: "font",
    icon: "meun-queren",
    // icon: "/static/images/home/icon/icon25.png",
    title: "意见反馈",
    path: "/pages/subFeeback/feedback/feedback",
  },
  {
    show: true,
    iconType: "font",
    icon: "meun-renzheng",
    // icon: "/static/images/home/icon/icon44.png",
    title: "清理缓存",
    islink: true,
    path: clearCache,
  },
  // #ifdef MP-WEIXIN
  {
    show: true,
    iconType: "font",
    icon: "meun-xunzhang",
    // icon: "/static/images/home/icon/icon24.png",
    title: "授权设置",
    islink: true,
    openType: "openSetting",
    linkText: "查看授权信息",
  },
  // #endif
  // #ifdef APP-PLUS
  {
    show: true,
    iconType: "font",
    icon: "meun-tishi",
    // icon: "/static/images/home/icon/icon24.png",
    title: "检查更新",
    islink: true,
    path: () => {
      // #ifdef APP
      // Tool.Core.checkUpgrade((data) => {}, true, true);
      // #endif
    },
  },
  // #endif
  {
    show: true,
    iconType: "font",
    icon: "meun-shijian",
    // icon: "/static/images/home/icon/icon24.png",
    title: "应用版本",
    desc: config.VERSION,
    islink: false,
    path: () => {
      if (!debugCount.value) debugCount.value = 0;
      debugCount.value++;
      if (debugCount.value < 5) return;
      uni.navigateTo({
        url: `/pages/subSetting/debug/debug`,
      });
      debugCount.value = 0;
    },
  },
  {
    show: false,
    iconType: "font",
    icon: "meun-dianzan",
    // icon: "/static/images/menu/menu_help.png",
    title: "使用帮助",
    islink: true,
    path: "/pages/subFeeback/feedbackIndex/feedbackIndex",
  },
  {
    show: true,
    iconType: "font",
    icon: "meun-shezhi",
    // icon: "/static/images/home/icon/icon61.png",
    title: "系统设置",
    islink: true,
    path: "/pages/subSetting/index",
  },
]);

const onCellItemClick = (item: any) => {
  if (item.path && typeof item.path === "string") {
    uni.navigateTo({
      url: item.path,
    });
  } else if (typeof item.path === "function") {
    item.path();
  }
};

const list = [
  {
    // 预设数据（防止数据加载中元素布局坍塌）
    name: "199.87",
    title: "会员余额",
    type: "memberBalance",
    path: "/subUsers/memberCenter/memberRecharge",
  },
  {
    name: "100",
    title: "当前积分",
    type: "currentPoints",
    path: "/subUsers/memberCenter/pointsDetails",
  },
  {
    name: "15",
    title: "我的优惠券",
    type: "myCoupon",
  },
];
const onUserGridClick = (item: any) => { };

const userFuncList = [
  {
    // icon: "/static/images/home/icon/icon1.png",
    title: "数据",
    type: "", // 用于设置数据定位key，而不是用index
    path: "/subMain/personalCenter/familyMembers",
    iconType: "font",
    icon: "meun-gaishuai",
    color: "#3271fd",
  },
  {
    // icon: "/static/images/home/icon/icon3.png",
    title: "钱包",
    iconType: "font",
    icon: "meun-kabao",
    color: "#f96c17",
    type: "",
    path: "/subMain/personalCenter/housingInformation",
  },
  {
    // icon: "/static/images/home/icon/icon19.png",
    title: "收藏",
    icon: "meun-shoucang",
    iconType: "font",
    color: "orange",
    path: "/subMain/personalCenter/registeredResidenceInformation",
    type: "",
  },
  {
    // icon: "/static/images/home/icon/icon27.png",
    title: "预警",
    icon: "meun-yujing",
    iconType: "font",
    color: "#ff1616",
    path: "/subMain/personalCenter/homeElectricityMeter",
    type: "",
  },
  // {
  //   icon: "/static/images/home/icon/icon19.png",
  //   title: "车辆信息",
  //   path: "/subMain/personalCenter/vehicleInformation",
  //   type: "",
  // },
];
const onOrderTypeClick = (item: any) => { };

// 计算属性
const userBaseInfo = computed(() => store.state.user.userInfo || {});


// 生命周期钩子
onMounted(() => {
  // 原始代码中的 onLoad 方法逻辑
  // ...
  console.log("onMounted", userBaseInfo);
});

// 假设的 clearCache 方法，直接作为函数路径使用
function clearCache() {
  // ... 清除缓存逻辑
  uni.showModal({
    title: "是否清除缓存",
    content: "确定清除缓存吗？该操作后需要重新登陆! 请确保您的所有数据已提交。",
    success: (res) => {
      if (res.confirm) {
        uni.clearStorage();
        store.dispatch("user/logout", { isReLaunch: true });
      } else if (res.cancel) {
      }
    },
  });
}
</script>
<style lang="scss" scoped>
.user-page {
  background-color: #f2f2f2;
  min-height: 100vh;
}

.user-top-view {
  background: linear-gradient($kui-color-theme, $kui-color-theme-light);
}

.user-view-header {
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  z-index: 0;

  .userinfo {
    padding-left: 16px;
    flex: auto;
    display: flex;
    justify-content: left;
    align-items: center;

    .uname {
      font-size: larger;
      font-weight: bolder;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;

      ._item {
        display: block;
        margin-right: 10px;
      }

      .vip-type {
        margin-left: 10px;
      }

      .edit-info-btn {
        display: flex;
      }
    }
  }
}



.user-view-item {
  background-color: white;
  margin: 30rpx 20rpx;
  border-radius: 20rpx;
}

::v-deep .account-balance {
  margin: 16px;
  background: #fff;
  color: var(--kui-color-theme);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  ::v-deep .u-grid {
    padding: 20rpx;
    margin: 10rpx 0;

    ::v-deep .g-value {
      font-weight: bolder;
      font-size: 40rpx;
      padding: 0rpx 16rpx;
    }

    ::v-deep .grid-text {
      margin-top: 10rpx;
      color: var(--kui-color-theme-light);
      font-size: 30rpx;
    }
  }
}

.g-item {
  padding: 20rpx;
  margin: 10rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .g-value {
    font-weight: bolder;
    font-size: 40rpx;
    padding: 0rpx 16rpx;
  }

  .grid-text {
    margin-top: 10rpx;
    color: var(--kui-color-theme-light);
    font-size: 30rpx;
  }
}

.meunfont-bg-style {
  border-radius: 20rpx;
  padding: 10rpx;
}

.hide-after {
  &::after {
    content: none;
    width: 0;
    height: 0;
  }
}

.round-header {
  position: absolute;
  width: 750rpx;
  height: 240rpx;
  background-color: $kui-color-theme;
  z-index: 0;
  top: 0;
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
}

.code_view {
  padding: 30px;

  .qrimg {
    border: 2px solid var(--kui-color-theme);
    padding: 10px;
  }
}
</style>
